import React, { useEffect, useState, useRef, useLayoutEffect } from 'react';
import { motion } from "framer-motion"
import { getBranches, checkoutBranche, getBrancheName, build } from '@/services/glbServer';
import messageEvent from '../../../proxy/messageEvent';
import { useSnapshot } from 'valtio';
import { message } from 'antd';

const Tab3: React.FC = () => {
    const [brancheList, setBrancheList] = useState([]);
    const newMessageEvent = useSnapshot(messageEvent);
    const alertmessage = () => {
        message.info('服务器正在进行操作，请耐心等待！');
    }
    const toGetBrancheName = async () => {
        const res = await getBrancheName()
        if (res.code === 200) {
            messageEvent.branche = res.data
        }
    }
    const toGetBranches = async () => {
        const res = await getBranches()
        if (res.code === 200) {
            setBrancheList(res.data)
        }
    }
    const toCheckoutBranche = async (name) => {
        if (newMessageEvent.canOperation) {
            messageEvent.canOperation = false
            await checkoutBranche({ name })
            await toGetBrancheName()
            messageEvent.canOperation = true
        } else {
            alertmessage()
        }
    }
    const toBuild = () => {
        if (newMessageEvent.canOperation) {
            messageEvent.canOperation = false
            const link = document.createElement('a');
            link.href = '/glb/build';
            link.download = 'dist.zip';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        } else {
            alertmessage()
        }
    }
    useEffect(() => {
        toGetBranches()
        toGetBrancheName()
    }, []);
    const buttonStyle = {
        width: "180px",
        height: "45px",
        textAlign: "center",
        border: '3px solid white',
    }
    const changeBranche = name => {
        toCheckoutBranche(name)
    }
    const renderLi = brancheList.map((item, i) => (
        <div
            key={item}
            onClick={() => { changeBranche(item) }}
            style={{
                ...buttonStyle,
                marginTop: 10,
                color: newMessageEvent.branche === item ? 'orange' : 'white',
                border: newMessageEvent.branche === item ? "3px solid orange" : '3px solid white',
            }}

        >
            {item}
        </div>
    ))
    return (
        <div
            className={"scroll-container"}
            style={{
                color: "white",
                width: '100%',
                fontSize: 30,
                textAlign: 'center',
                height: '100%',
                display: "flex",
                flexDirection: "row",
                justifyContent: "space-between",
                alignItems: "center"
            }}>
            <motion.div
                animate={{ opacity: 1, x: 100 }}
                transition={{ duration: 1 }}
                initial={{ opacity: 0 }}
                style={{
                    height: 500,
                    overflowY: 'auto',
                    pointerEvents: "all",
                }}>
                点击切换分支
                {renderLi}
            </motion.div>
            <motion.div
                style={{
                    ...buttonStyle,
                    pointerEvents: "all",
                }}
                animate={{ opacity: 1, x: -100 }}
                transition={{ duration: 1 }}
                initial={{ opacity: 0 }}
                onClick={() => { toBuild() }}
            >
                一键打包
            </motion.div>
        </div >
    );
};

export default Tab3;
